import { Route, Routes, NavLink, useNavigate, useParams } from "react-router-dom"
import Home from "./views/Home"
import Dian from "./views/Dian"
import Ding from "./views/Ding"
import My from "./views/My"
import Xiang from "./views/Xiang"
import "./App.css"
function App() {
  let tiao = useNavigate()
  return (
    <div>
      <div className="box">
        <Routes>
          <Route element={<Home />} path="/"></Route>
          <Route element={<Dian />} path="/dian"></Route>
          <Route element={<Ding />} path="/ding"></Route>
          <Route element={<My />} path="/my"></Route>
          <Route element={<Xiang />} path='/xiang'></Route>
        </Routes>
      </div>
      <div className='footerBox'>
        {/* <span onClick={() => tiao("/home")}>首页</span>
        <span onClick={() => tiao("/dian")}>点餐</span>
        <span onClick={() => tiao("/ding")}>订单</span>
        <span onClick={() => tiao("/my")}>我的</span> */}
        <NavLink to="/">首页</NavLink>
        <NavLink to="/dian">点餐</NavLink>
        <NavLink to="/ding">订单</NavLink>
        <NavLink to="/my">我的</NavLink>
      </div>









      {/* {
        list.map(item => {
          return (
            <div key={item.id}
              style={{ display: "flex", width: "50vw", justifyContent: "space-evenly" }}
            >
              <p>  <b>商品名称:</b>{item.name}</p>
              <p><b>  数量:</b>{item.num}</p>
              <p> <b> 价格:</b>{item.price}</p>
            </div>
          )
        })
      } */}
    </div >
  )
}

export default App
